
<template>
  <div>
    <Header />
    <div class="back">
      <div class="container">
        <div class="content">
          <h2>2023年 山东高考志愿模拟填报</h2>
          <div class="progress-bar">
            <div class="step" v-for="(step, index) in steps" :key="index" :class="{ active: index === current }">
              <div class="step-inner">
                <div class="step-icon" :class="{ 'icon-active': index === current }" @click="current = index">
                  <span>{{ index + 1 }}</span>
                </div>
                <div class="step-title">{{ step.title }}</div>
              </div>
              <div class="step-line" :class="{ 'step-line-active': index < current }" v-if="index !== steps.length - 1">
              </div>
            </div>
          </div>
          <div class="table">
            我的成绩：550分<img @click="open = true" src="/svg/edit.svg" alt="edit" />
          </div>
          <div>
            <Table :columns="columns">
              <template #emptyText>
                <span>请创建成绩后查看</span>
              </template>
            </Table>
          </div>
          <div>
            <h3>填报须知</h3>
            <ol>
              <li>本系统依据历年院校录取数据提供高考志愿填报智能模拟功能，不等同于实际的网上填报志愿，建议考生在填报志愿时，结合本系统的推荐以完善志愿表，正式填报请登录省考试院指定填报网站；</li>
              <li>2023年计划数已更新；</li>
              <li>2012-2022年各院校录取数据，参考各省市出版的填报指南以及各本专科院校的官网历年录取数据；</li>
              <li>您正在使用的是山东版，提供“普通类1段 2段、”2个批次的志愿智能模拟功能，您可以按系统的重点填报提示选择适合自己的批次模拟，也可直接选择自己关注的批次模拟；</li>
              <li>在正式填报时，以教育考试院公布的最新招生计划为准；</li>
              <li>若推荐院校招生计划数出现新增专业，会提示”新增专业“且历三年录取数据展示默认采用该院校最低录取分数线。</li>
            </ol>

          </div>
        </div>
      </div>
    </div>
    <Footer />

    <div ref="modal">
      <Modal v-model:open="open" title="创建成绩" :footer="null" :maskClosable="true" :getContainer="() => $refs.modal as any"
        style="width: 575px;" :width="575">
        <div class="form modal-content">
          <div class="flex column one">
            <div class="modal-title">分数</div> <input class="input" type="text"><div class="desc">分数区间 100-750</div>
          </div>
          <div class="flex column">
            <div class="modal-title">选科</div>
            <div class="flex two">
              <div v-for="item in majorList" :key="(item as string)"
                :class="['filter-item', { 'active': selectList.includes(item) }]">
                {{ item }}
              </div>
            </div>
          </div>
          <button class="select" @click="open=false">创建</button>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import Nested from '@/components/nested/index.vue'
import Filter from '@/components/filter/index.vue'
import MajorList from '@/components/majorList/index.vue'
import { NestedType } from '@/components/nested/nested'
import { subject, subject2 } from '@/components/universityNavList/data'
import UniversityPopular from '@/components/universityPopular/index.vue'
import { Table, Modal } from 'ant-design-vue'
const nestedList = ref<NestedType[]>([{ name: '首页', path: '/' }, { name: '专业库', path: '/major' }])
const selectList = ref<string[]>(['不限', '全部'])
const steps = [
  { title: '选择批次', width: 25 },
  { title: '智能填报', width: 50 },
  { title: '生成志愿表', width: 75 }
]
const majorList = ref(['物理', '化学', '生物', '政治', '历史', '地理'])
const open = ref<boolean>(false)

const columns = [
  {
    title: '报考批次',
    dataIndex: 'batch',
    key: 'batch'
  },
  {
    title: '科类',
    dataIndex: 'category',
    key: 'category'
  },
  {
    title: '批次线',
    dataIndex: 'cutoff',
    key: 'cutoff'
  },
  {
    title: '填报',
    key: 'action',
    slots: { customRender: 'action' }
  }
]
const current = ref(0)
</script>

<style lang="less" scoped>
@import "./index.less";

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 16px;
  position: relative;
  left: -30px;
}

.step {
  display: flex;
  align-items: center;
  position: relative;
}

.step-inner {
  align-items: center;
  position: relative;
  top: 12px;
  left: 30px;
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #cccccc;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.icon-active {
  background-color: @primary-color;
}

.step-title {
  margin-left: 0px;
  position: relative;
  left: -10px;
}

.step-line {
  position: absolute;
  top: 50%;
  left: calc(50% + 50px);
  min-width: 460px;
  height: 2px;
  background-color: #cccccc;
}

.step-line-active {
  background-color: @primary-color;
}
</style>
